﻿
@{
    ViewBag.Title = "添加区域";
}
@model KTD.Web.Models.VD.AreaCUD

<div class="x-body" id="saveResult" style="width:100%;display:flex;flex-direction:row;">
    <div class="layui-form" style="width:30%;">
        @Html.HiddenFor(model => model.Id)


        <input type="hidden" id="ison" name="ison" value="@ViewBag.isSon" />
        @if (ViewBag.isSon as string == "true")
        {
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="L_email" class="layui-form-label">
                        <span class="x-red">*</span>上级市州
                    </label>
                    <div class="layui-input-inline">
                        @Html.DropDownList("uniacid", ViewBag.CityList as IEnumerable<SelectListItem>)
                    </div>
                </div>
            </div>
        }
        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="L_email" class="layui-form-label">
                    <span class="x-red">*</span>区域名称
                </label>
                <div class="layui-input-inline">
                    @Html.TextBoxFor(model => model.name, new { @class = "layui-input" })
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="L_email" class="layui-form-label">
                    <span class="x-red">*</span>经纬度
                </label>
                <div class="layui-input-inline">
                    @Html.TextBoxFor(model => model.lng, new { @class = "layui-input" })
                    @Html.TextBoxFor(model => model.lat, new { @class = "layui-input" })
                </div>

                @*<button id="MapBtn" class="layui-btn" lay-filter="add" lay-submit="">
                        选择坐标
                    </button>*@
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="L_email" class="layui-form-label">
                    <span class="x-red">*</span>顺序
                </label>
                <div class="layui-input-inline">
                    @Html.TextBoxFor(model => model.sort, new { @class = "layui-input" })
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button id="btnAdd" class="layui-btn" lay-filter="add" lay-submit="">
                保存
            </button>
        </div>
    </div>
    <div class="layui-input-inline" id="selectLocation" style="height:600px;flex:1;">
        <div>
            <input id="address" type="text" value="">
            <button id="addressBtn">搜索</button>
        </div>
        <div id="map" style="height:600px;width:600px;"></div>
    </div>
</div>



@section scripts{
    <script src="~/Scripts/wangEditor.min.js"></script>
    <script src="~/lib/Context/basicContext.min.js"></script>
    <script src="https://map.qq.com/api/js?v=2.exp&key=d84d6d83e0e51e481e50454ccbe8986b"></script>
    <script>
        layui.use(['form', 'layer'], function () {
            $ = layui.jquery;
            var form = layui.form
                , layer = layui.layer;

            //监听提交
            form.on('submit(add)', function (data) {
                var formdata = new FormData();
                formdata.append("name", $("#name").val());
                formdata.append("lng", $("#lng").val());
                formdata.append("lat", $("#lat").val());
                formdata.append("uniacid", $("#uniacid").val());
                 formdata.append("ison", $("#ison").val());
                formdata.append("sort", $("#sort").val());
                formdata.append("enabled", $("#enabled").val());
                $.ajax({

                    url: "/Area/Update",
                    type: "post",
                    data: formdata,
                    processData: false,    // 不处理数据
                    contentType: false,    // 不设置内容类型

                    success: function (data) {

                        //发异步，把数据提交给php
                        layer.alert("修改成功", { icon: 6 }, function () {
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                            parent.window.location.reload();
                        });
                    }
                })
                return false;
            });


        });
        $(document).ready(function () {
            var lat = 30.666266, lng = 104.069366;
            if (@Model.lat!= 0 &&@Model.lng!= 0) {
                lat =@Model.lat;
                lng =@Model.lng;
            }
            var center = new qq.maps.LatLng(lat, lng);
            var map = new qq.maps.Map(document.getElementById("map"), {
                zoom: 13,
                // 地图的中心地理坐标。
                center: center
            });
            marker = new qq.maps.Marker({
                position: center,
                animation: qq.maps.MarkerAnimation.DROP,
                map: map
            });

            //地址和经纬度之间进行转换服务
            geocoder = new qq.maps.Geocoder({
                //设置服务请求成功的回调函数
                complete: function (result) {

                    map.setCenter(result.detail.location);
                     marker.setMap(null);
                     marker = new qq.maps.Marker({
                        map:map,
                        position: result.detail.location
                    });
                     $("#lat").val( result.detail.location.lat);
                     $("#lng").val(result.detail.location.lng);
                    $("#address").val(result.detail.address.replace("中国", ""));
                },
                //若服务请求失败，则运行以下函数
                error: function () {
                    alert("出错了，请输入正确的经纬度！！！");
                }
            });


            //添加监听事件   获取鼠标单击事件
            qq.maps.event.addListener(map, 'click', function (event) {

                marker.setMap(null);
                marker = new qq.maps.Marker({
                    position: event.latLng,
                    map: map
                });
                console.log(event);

                $("#lat").val(event.latLng.lat);
                $("#lng").val(event.latLng.lng);
                geocoder.getAddress(event.latLng);
            });

            $("#addressBtn").click(function () {

                var address = document.getElementById("address").value;
                //通过getLocation();方法获取位置信息值
                geocoder.getLocation(address);
            });


              layui.use(['element','form'], function(){
                    var element = layui.element;
                    var form = layui.form;
                    var  layer = layui.layer;

                  form.on('select(uniacid)', function (data) {
                      $.ajax({

                            url: "/Area/Find",
                            data: {
                                id: $("#uniacid").val()
                            },
                            type: "get",

                            success: function (data) {
                                if (data.success) {
                                     var center = new qq.maps.LatLng(data.data.lat, data.data.lng);
                                    map.setCenter(center);
                                    marker.setMap(null);
                                    marker = new qq.maps.Marker({
                                        position: center,
                                        animation: qq.maps.MarkerAnimation.DROP,
                                        map: map
                                     });
                                }
                            }
                        });
                  });
               })

        });



    </script>
}